<html>
    
    <head>
        <meta charset=UTF-8>
        <meta name="viewport" content="width=device-width, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <style>
            canvas {
                box-shadow: 0px 0px 8px 0px black;
            }
        </style>
        <script src="./../../src/tmlib.js" charset="UTF-8"></script>
        <script>
            
            TM.loadScript("app");
            TM.loadScript("geom");
            
            TM.global.SCREEN_WIDTH  = TM.isMobile ? screen.width  : 640;
            TM.global.SCREEN_HEIGHT = TM.isMobile ? screen.height : 480;
            
            TM.global.bulletGroup   = null;
            TM.global.enemyGroup    = null;
            
            TM.main(function(){
                // プレイヤー用画像を作成
                TM.global.playerImage = TM.$Graphics();
                with(TM.global.playerImage) {
                    width = height= 40;
                    setTransformCenter();
                    setColorStyle("white", "white");
                    fillPolygon(0, 0, 20, 3, 0);
                }
                // 弾用画像を作成
                TM.global.bulletImage = TM.$Graphics();
                with(TM.global.bulletImage) {
                    width = height = 10;
                    setTransformCenter();
                    setColorStyle("white", "white");
                    fillCircle(0, 0, 5);
                }
                // 適用画像を作成
                TM.global.enemyImage = TM.$Graphics();
                with(TM.global.enemyImage) {
                    width = height = 40;
                    setTransformCenter();
                    setColorStyle("red", "red");
                    fillStar(0, 0, 20, 16, 0.6);
                }
                
            });
            
            TM.main(function(){
                /**
                 * プレイヤークラス
                 */
                TM.global.Player = TM.createClass({
                    
                    superClass: TM.App.Sprite,
                    
                    init: function() {
                        // 親のコンストラクタを実行
                        this.superInit(TM.App.Sprite, TM.global.playerImage);
                        
                        this.x = 30;
                        this.y = TM.global.SCREEN_HEIGHT/2;
                        this.velocity = TM.$V2(0, 0);   // 速度
                        this.radius = 20;               // 半径
                        this.speed  =  0;               // スピード
                    },
                    
                    update: function(app) {
                        // キーボードによる速度設定
                        var angle = app.keyboard.getKeyAngle();
                        if (angle != null) {
                            this.velocity.setFromDegree( angle, 1 );
                            this.velocity.y *= -1;
                            this.speed      = 8;
                        }
                        
                        // マウス or タッチによる速度設定
                        // if (app.mouse.getButton(TM.$Mouse.BUTTON_LEFT) || app.touch.getTouch()) {
                        if (app.pointing.getPointing()) {
                            this.velocity.x = app.pointing.x - this.position.x;
                            this.velocity.y = app.pointing.y - this.position.y;
                            if (this.velocity.lengthSquared() > 20*20) {
                                this.speed = 8;
                            }
                            this.velocity.normalize();
                        }
                        
                        // 移動
                        this.position.add( TM.$V3.mul(this.velocity, this.speed) );
                        
                        // はみ出しチェック
                        var screenRect = TM.$Rect(0, 0, app.graphics.width, app.graphics.height);
                        screenRect.padding(this.radius);
                        if (this.x < screenRect.left)   this.x = screenRect.left;
                        if (this.x > screenRect.right)  this.x = screenRect.right;
                        if (this.y < screenRect.top)    this.y = screenRect.top;
                        if (this.y > screenRect.bottom) this.y = screenRect.bottom;
                        
                        // 摩擦的な
                        this.speed *= 0.5;
                        
                        // ショット
                        if (app.keyboard.getKeyDown("space") || app.pointing.getPointingEnd()) {
                            TM.global.bulletGroup.addChild(
                                TM.global.Bullet(this.x+this.radius, this.y)
                            );
                            
                            TM.$SoundManager.get("shot").play();
                            // TM.global.shotSE.play();
                        }
                    }
                });
                
                /**
                 * 弾
                 */
                TM.global.Bullet = TM.createClass({
                    
                    superClass: TM.App.Sprite,
                    // 初期化
                    init: function(x, y) {
                        // 親のコンストラクタを実行
                        this.superInit(TM.App.Sprite, TM.global.bulletImage);
                        
                        this.x = x; this.y = y;         // 位置設定
                        this.velocity = TM.$V2(0, 0);   // 速度
                        this.radius = 5;                // 半径
                    },
                    // 更新
                    update: function() {
                        this.x += 16;
                        if (this.x >= TM.global.SCREEN_WIDTH+30) {
                            this.remove();
                        }
                        if (this.destroy == true) {
                            this.remove();
                        } 
                    }
                });
                
                /**
                 * 敵クラス
                 */
                TM.global.Enemy = TM.createClass({
                    
                    superClass: TM.App.Sprite,
                    // 初期化
                    init: function(x, y) {
                        // 親のコンストラクタを実行
                        this.superInit(TM.App.Sprite, TM.global.enemyImage);
                        
                        this.x = x; this.y = y;         // 位置設定
                        this.velocity = TM.$V2(0, 0);   // 速度
                        this.radius = 20;               // 半径
                    },
                    // 更新
                    update: function() {
                        this.x -= 4;
                        this.rotate -= 4;
                        if (this.x < -30) { this.remove(); }
                        if (this.destroy == true) {
                            this.remove();
                        }
                    }
                });
                
                TM.global.Crash = TM.createClass({
                    
                    superClass: TM.App.GameElement,
                    // 初期化
                    init: function(x, y) {
                        // 親のコンストラクタを実行
                        this.superInit(TM.App.GameElement);
                        this.x = x;
                        this.y = y;
                        this.timer = 30;
                        
                        var self = this;
                        for (var i=0; i<8; ++i) {
                            var particle = TM.App.Sprite(TM.global.enemyImage);
                            particle.scaleX = particle.scaleY = 0.5;
                            particle.v = TM.$V2.random(0, 360, 2);
                            particle.update = function() {
                                this.x += this.v.x;
                                this.y += this.v.y;
                                this.v.mul(0.95);
                                this.alpha = (self.timer/30.0);
                            }
                            this.addChild(particle);
                        }
                    },
                    
                    update: function() {
                        this.timer -= 1;
                        if (this.timer <= 0) {
                            this.remove();
                        }
                    }
                });
            });
            
            
            TM.main(function(){
                
                load();
                init();
                run();
                
                // インフォメーション表示
                TM.inform();
            });
            
            var load = function() {
                
                TM.global.music = TM.$Sound("music/Loop_35." + TM.$Sound.SUPPORT_EXT);
                TM.$SoundManager.add("shot", "se/chargeshot." + TM.$Sound.SUPPORT_EXT);
                TM.$SoundManager.add("crash", "se/crash21." + TM.$Sound.SUPPORT_EXT);
            };
            
            var init = function() {
                var canvas = TM.$id("c");
                TM.$centering(canvas);
                var app = TM.global.app = TM.App.CanvasApp( canvas );
                if (TM.isMobile) {
                    app.graphics.fitWindowSize();
                }
                app.score = 0;
                
                // プレイヤー生成
                app.scene.addChild(TM.global.Player());
                
                // 弾用グループセットアップ
                var bulletGroup = TM.global.bulletGroup   = TM.$GameElement();
                app.scene.addChild(TM.global.bulletGroup);
                
                // 適用グループセットアップ
                var enemyGroup = TM.global.enemyGroup    = TM.$GameElement();
                app.scene.addChild(TM.global.enemyGroup);
                TM.global.enemyGroup.update = function(app) {
                    if (app.frame % 30 == 0) {
                        TM.global.enemyGroup.addChild(
                            TM.global.Enemy(660, TM.random(0+20, 480-20))
                        );
                    }
                };
                
                
                // スコア生成
                var score = TM.App.Text("Score :     0");
                score.position.set(620, 20);
                score.align     = "end";
                score.baseline  = "top";
                score.width = 320;
                app.scene.addChild(score);
                
                
                // シーン更新処理登録
                app.scene.update = function() {
                    for (var i=0; i<enemyGroup.children.length; ++i) {
                        var enemy = enemyGroup.children[i];
                        for (var j=0; j<bulletGroup.children.length; ++j) {
                            var bullet = bulletGroup.children[j];
                            // 敵と弾の衝突判定
                            if (enemy.isHitElement(bullet) == true) {
                                enemy.destroy = true;
                                bullet.destroy = true;
                                TM.$SoundManager.get("crash").play();
                                // TM.global.crashSE.play();
                                app.score += 100;
                                score.text = "Score : {score}".format({score: app.score.padding(5, ' ')});
                                var crash = TM.global.Crash(enemy.x, enemy.y);
                                app.scene.addChild(crash);
                            }
                        }
                    }
                };
            };
            
            
            var run = function() {
                var app = TM.global.app;
                
                TM.global.music.loop = true;
                TM.global.music.play();
                
                app.run();
            };
            
        </script>
    </head>
    
    <body>
        <canvas id="c" width="640" height="480"></canvas>
    </body>
    
</html>